<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn></template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:needContent="scope">
        {{ formatNeeds(scope.row.needContent) }}
      </template>
      <template v-slot:option="scope">
        <el-button plain type="primary" @click="detail(scope.row.id)">
          详情
        </el-button>
      </template>
    </pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
    <!-- 详情页 -->
    <pub-page-dialog-close v-model:show="isShow.detailShow">
      <detail-com :id="currentId"></detail-com>
    </pub-page-dialog-close>
  </list-page>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { useTable } from '@/hooks/UseTable'
import { get_xqgl_list, del_xqgl_list } from '@/api/basicSetting.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import detailCom from '@/view/YYGL/XQGL/components/detail.vue'
import { appCurrentState } from '@/pinia/modules/app'
const isShow = reactive({
  detailShow: false,
  editShow: false
})
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const currentId = ref('')
const formatNeeds = val => {
  if (val) {
    let str = ''
    let arr = JSON.parse(val)
    for (let i = 0; i < arr.length; i++) {
      str += (i == 0 ? '' : ',') + arr[i].name
    }
    return str
  } else {
    return '--'
  }
}
const searchColumns = ref([
  {
    label: '需求内容',
    el: 'pubSelectApi',
    bind: 'needIds',
    labelWidth: 80,
    url: '/baseNeed/list',
    searchParams: {},
    optionsFormat: {
      label: 'name',
      value: 'id'
    },
    clearable: true
  }
])
const columns = ref([
  { label: '老人姓名', prop: 'elderName' },
  { label: '老人证件号码', prop: 'elderIdCard' },
  { label: '老人联系方式', prop: 'elderTel' },
  {
    label: '老人类型',
    prop: 'elderType',
    type: 'formatDict',
    formatCode: 'LRLB'
  },
  { label: '需求内容', prop: 'needContent', slot: 'needContent' },
  { label: '对接时间', prop: 'contactTime' },
  { label: '服务地点', prop: 'servicePlace' },
  { label: '服务人员', prop: 'servicePerson' },
  {
    label: '完成情况',
    prop: 'finishCase',
    type: 'formatDict',
    formatCode: 'XQGL-WCQK'
  },
  { label: '所属中心', prop: 'orgName' },
  { label: '操作', type: 'option', width: '80' }
])
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_xqgl_list, { elderId: props.id })

const detail = id => {
  currentId.value = id
  isShow.detailShow = true
}

const submitSuccess = val => {
  isShow[val] = false
  search()
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped></style>
